<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta aria-description="通过代理实现骨架屏的显示" about="">
    <title>骨架屏代理实现</title>
</head>
<style>
    div.loading {
        border-radius: 5px;
        background-color: #efefef;
        color: transparent;
        border-color: transparent;

    }
    .box {
        background-color: aqua;
        margin: 10px 20px;
        height: 100px;
    }
</style>
<body>
<div >
    <button onclick="startLoading()">开启加载</button>
    <button onclick="closeLoadingFun()">关闭加载</button>
   <div class="box" id="app"></div>
</div>
</body>


<script>

    const loading = {
        state: true,
        el: document.getElementById('app')
    }
    const proxyLoading = new Proxy(loading, {
        construct(target, argArray, newTarget) {
            this.value = target
        },
        value: {},
        get(target, key) {
            return target[key]
        },
        set(target, key, value) {
            const oldValue = target[key]
            if (oldValue === value) {
                return
            }
            this.value = target
            if (value) {
                setLoading(this.value.el)
            } else {
                closeLoading(this.value.el)
            }
            Reflect.set(target, key, value);

        },
    })

    const closeLoading = (el) => {
        el.classList.remove('loading')
    }
    const setLoading = (el) => {
        el.classList.add('loading')
    }
    const init = () => {
        if (proxyLoading.state) {
           setLoading(proxyLoading.el)
       }
    }
    init()

    const startLoading = () => {
        proxyLoading.state = true;
    }
    const closeLoadingFun = () => {
        proxyLoading.state = false
    }
</script>
<script>
    async function test () {
        const f = await import('./test.js')
        console.log(1111,f);
        const {a} = f
        console.log('aaa',a);
    }

    console.log(test);

</script>
</html>
